﻿
@{
    Layout = null;
}



<!DOCTYPE html>
<html data-use-rem="750">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="format-detection" content="telephone=no, email=no">
    <title></title>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="/mui/css/mui.min.css">

    <style type="text/css">
        /*模块2*/
        div, spansection, input, select, button {
            margin: 0;
            padding: 0;
            border: 0;
            box-sizing: border-box;
        }

        .mo2 {
            margin-top: 10px;
            padding: 10px;
            background: #fff;
            position: relative;
        }

            .mo2 .mui-pull-left select {
                width: 90px;
                font-size: 12px;
                padding: 2px 10px;
                border: 1px solid #E8E7EB !important;
                height: 26px;
            }

            .mo2 > span {
                display: inline-block;
                font-size: 12px;
                position: absolute;
                top: 17px;
                left: 140px;
            }

            .mo2 .mui-pull-right > span {
                display: inline-block;
                font-size: 12px;
            }

            .mo2 .mui-pull-left > span {
                color: #5F5D60;
                font-size: 12px;
                padding-right: 5px;
            }

            .mo2 .mui-pull-right input, .mo2 .mui-pull-right button {
                font-size: 12px;
            }

            .mo2 .mui-pull-right input {
                width: 115px;
                height: 26px;
                line-height: 26px;
                margin-bottom: 0;
                position: relative;
                right: -5px;
                border-radius: 0;
                border: 1px solid #ddd;
                border-right: 0;
            }

            .mo2 .mui-pull-right button {
                width: 30px;
                background: #009DD9;
                color: #fff;
                height: 26px;
                line-height: 26px;
                border-radius: 0;
            }
        .mui-table-view-chevron .mui-table-view-cell {
            padding-right: 5px;
        }
        .mui-table-view-cell {
            padding: 11px 15px 15px 5px;
            list-style: none;
        }
        .mui-card {
            margin: 5px;
        }
        .mui-card-header {
            border-top: 1px solid #eeeeee;
        }
        .mui-scroll{
            background-color:#FFFFFF;
        }
    </style>
</head>

<body>
    <input name="hid_page" type="hidden" id="hid_page" value="1" />
    <div class="mui-inner-wrap">
        <header class="mui-bar mui-bar-nav">
            <h1 class="mui-title">经销商网点</h1>
        </header>

        <div class="mui-content">

            <section class="mo2 mui-clearfix">
                <span class="mui-icon mui-icon-arrowdown downSele" class1=""></span>
                <div class="mui-pull-left">
                    <span>所属省市</span>
                    <select name="txtProvice" id="txtProvice">
                         
                    </select>
                </div>
                <div class="mui-pull-right">
                    <input id="txt_search" type="text" value="@ViewBag.Key" />
                    <button id="btn_search" type="button">查询</button>
                </div>
            </section>


            <div id="pullrefresh" class="">
                <div class="mui-scroll" id="dat">
                    <!--数据列表-->
                    <ul class="mui-table-view mui-table-view-chevron">
                        <!--<li class="mui-table-view-cell">
                            <div class="mui-card">
                                <div class="mui-card-header">吉林泰和丰汽车配件有限公司</div>
                                <div class="mui-card-content">
                                    <div class="mui-card-content-inner">
                                        <h5>电话：18143103737</h5>
                                        <h5>地址：中国吉林省长春市绿园区高力汽贸城B区24-120号</h5>
                                    </div>
                                </div>
                            </div>
                        </li>-->
                        
                    </ul>
                </div>
            </div>


           

        </div>
    </div>

    <script src="/mui/js/mui.min.js" type="text/javascript"></script>
    <script src="/Content/jquery/jquery-2.2.3.min.js"></script>
    <script type="text/javascript">
        var shop_modle = @this.RawSerialize(this.ViewBag.ShopModle);
        var data_list = shop_modle.Models;
        var _parts=@this.RawSerialize(this.ViewBag.PartList);
        var cur_page = 1;
        var total_page = data_list.TotalPage;
        mui.init({
            pullRefresh: {
                container: '#pullrefresh',
                up: {
                    contentrefresh: '正在加载...',
                    callback: pullupRefresh
                }
            }
        });
       
        var count = 0;
        /**
         * 上拉加载具体业务实现
         */
        function pullupRefresh() {
            setTimeout(function ()
            {
                mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。

                //var table = document.body.querySelector('.mui-table-view');
                //var cells = document.body.querySelectorAll('.mui-table-view-cell');
                //for (var i = cells.length, len = i + 5; i < len; i++) {
                //    var li = document.createElement('li');
                //    li.className = 'mui-table-view-cell';
                //    li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
                //    table.appendChild(li);
                //}
                //-----------------------------------------------------------
                var pid = jQuery("#txtProvice").val(); //document.getElementById("hid_ids").value;
                var cur_page = document.getElementById("hid_page").value;
                var s1 = document.getElementById("txt_search").value;
                cur_page++;

                if (cur_page <= page_count) {

                }
                else {
                    mui.toast("没有更多数据");
                    jQuery(".mui-pull-bottom-tips").hide();
                    return;
                }


                mui.ajax('/API/GetShopPageList', {
                    data: {
                        ProvinceID: pid,
                        BrandID: 29,
                        page: cur_page,
                        size: 10,
                        Key: s1
                    },
                    dataType: 'json',
                    type: 'GET',
                    timeout: 5000,
                    success: function (rs)
                    {
                        document.getElementById("hid_page").value = cur_page;
                        if (rs != "") {
                            $(rs.data).each(function (i, item)
                            {
                                var s = "";
                                s += "<li class=\"mui-table-view-cell\">";
                                s += "<div class=\"mui-card\">";
                                s += "<div class=\"mui-card-header\">" + item.ShopName + "</div>";
                                s += "<div class=\"mui-card-content\">";
                                s += "<div class=\"mui-card-content-inner\">";
                                s += "<h5>电话：" + item.ShopTel + "</h5>";
                                s += "<h5>地址：" + item.ShopAddress + "</h5>";
                                s += "</div>";
                                s += "</div>";
                                s += "</div>";
                                s += "</li>";

                                jQuery(s).insertBefore(".mui-pull-bottom-tips");

                            });
                        }
                        else {
                            mui.toast("没有更多数据");
                            console.log(data);
                        }
                    },
                    error: function (xhr, type, errorThrown) {
                        mui.alert(type);
                    }
                });


                //----------------------------------------------------------



            }, 1500);
        }
//			if (mui.os.plus) {
//				mui.plusReady(function() {
//					setTimeout(function() {
//						mui('#pullrefresh').pullRefresh().pullupLoading();
//					}, 10);
//
//				});
//			} else {
//				mui.ready(function() {
//					mui('#pullrefresh').pullRefresh().pullupLoading();
//				});
//			}


        mui.ready(function () {

            if (_parts.length > 0) {
                var s = "";
                data_list.map(function (item) {
                    s += "<li class=\"mui-table-view-cell\">";
                    s += "<div class=\"mui-card\">";
                    s += "<div class=\"mui-card-header\">" + item.ShopName + "</div>";
                    s += "<div class=\"mui-card-content\">";
                    s += "<div class=\"mui-card-content-inner\">";
                    s += "<h5>电话：" + item.ShopTel + "</h5>";
                    s += "<h5>地址：" + item.ShopAddress + "</h5>";
                    s += "</div>";
                    s += "</div>";
                    s += "</div>";
                    s += "</li>";
                });
                jQuery("#dat").html(s);
            }
            if (_parts.length > 0)
            {
                var s = "<option selected=\"selected\" value=\"0\">--选择--</option>";
                _parts.map(function (item) {
                    s += "<option value=\"" + item.ID + "\">" + item.Name +"</option>";
                });
                jQuery("#txtProvice").html(s);
            }

            jQuery("#txtProvice").change(function () {
                window.location.href = "/Account/ShopList?ProvinceID=" + jQuery("#txtProvice").val();
            });
            jQuery("#btn_search").click(function () {
                window.location.href = "/Account/ShopList?ProvinceID=" + jQuery("#txtProvice").val() + "&Key=" + jQuery("#txt_search").val();
            });

            var pid = "@ViewBag.ProvinceID"; //txtProvice
            if (pid != "") {
                jQuery("#txtProvice").val(pid);
            }

        });


        
            
                
                
                    
                        
                        
                    
                
            
        



    </script>

</body>

</html>
